<template>
  <div class="send-user">
    <template v-if="!isDetails">
      <a-input style="width: 40%" v-model.trim="communityId" placeholder="请填写社区ID" />
      <a-button type="primary" style="margin-left: 15px;" @click="handleAddMember">确认添加</a-button>
      <a-upload
        accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        name="file"
        :showUploadList="false"
        :multiple="false"
        :data="{ logInUserId: userInfo().id , id: id == 'null' ? null : id}"
        :action="uploadUrl"
        @change="handleChange"
      >
        <a-button style="margin-left: 15px;">批量添加</a-button>
      </a-upload>
      <div style="display: flex;justify-content: space-between;">
        当前共添加成功{{ total }}个对象
        <span style="margin-left: 5px;text-decoration: underline;color: blue;cursor: pointer" @click="handleExportSendUser">点击下载导入模版</span>
      </div>
    </template>
    <a-table :pagination="pagination" :columns="isDetails ? detailsMemberColumns : memberColumns" :data-source="sendUserList" :rowKey="(record, index) => index" size="middle" @change="handleSendUserChange">
      <span  slot="communityId" slot-scope="text, record, index" key="1">
        <template v-if="!isDetails">uid{{ record.communityId }}</template>
        <template v-if="isDetails">{{ record.userNickname}}/{{record.phone}}(社区ID：{{record.communityId}})</template>
      </span>
      <span slot="action" slot-scope="text, record, index">
        <a-popconfirm title="请确认是否删除本条信息？" @confirm="handleDelete(record.communityId)">
          <a-icon type="delete" style="cursor: pointer;" />
        </a-popconfirm>
      </span>
    </a-table>
  </div>
</template>
<script>
import { sendUserExpert, sendUserBatchAdd, uploadList, uploadDelete, batchUploadAdd, advicesDetail } from '@/api/micromall/communityMarketing'
import { mapGetters } from 'vuex'
const memberColumns = [
  {
    title: '序号',
    width: '50px',
    align: 'center',
    dataIndex: 'seq'
  },
  {
    title: '发送对象',
    width: '150px',
    align: 'center',
    scopedSlots: { customRender: 'communityId' }
  },
  {
    title: '操作',
    width: '100px',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
const detailsMemberColumns = [
  {
    title: '序号',
    width: 1,
    align: 'center',
    dataIndex: 'seq'
  },
  {
    title: '发送对象',
    width: 4,
    align: 'center',
    scopedSlots: { customRender: 'communityId' }
  }
]
export default {
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    isDetails: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      total: 0,
      pagination: {
        current: 1,
        pageSize: 5,
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      memberColumns,
      detailsMemberColumns,
      sendUserList: [],
      communityId: '',
      // uploadData: {
      //   logInUserId: userInfo().id
      // },
      uploadUrl: sendUserBatchAdd,
      totalUser: '',
      totalNoSub: '',
      totalNoCard: ''
    }
  },
  computed: {},
  created() {
    if (this.id == 'null') return
    this.getSendUserList()
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    //检测是否添加发放对象
    checkSendUser() {
      if (this.totalUser > 0) {
        return true
      } else {
        return false
      }
    },

    // 批量添加发放对象
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        const {msg, message, code, data} = info.file.response
        if (code == 200 ) {
           this.refreshSendUserList()
        } else {
           this.$message.error(msg || message)
        }
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },

    // 单独添加发放对象
    handleAddMember() {
      if (!this.communityId) {
        this.$message.info('请填写社区ID！')
        return false
      }
      const data = {
        communityId: this.communityId,
        logInUserId: this.userInfo().id,
        id: this.id == 'null' ? null : this.id
      }
      batchUploadAdd(data)
        .then(res => {
          this.spinning = false
          if (res.code === 200) {
            this.communityId = ''
            this.refreshSendUserList()
          } else {
            this.$message.error(res.msg || res.message)
          }
        })
        .catch(err => {
          this.spinning = false
        })
    },

    // 删除发放对象
    handleDelete(communityId) {
      const data = {
        communityId,
        logInUserId: this.userInfo().id,
        id: this.id == 'null' ? null : this.id
      }
      uploadDelete(data)
        .then(res => {
          this.spinning = false
          if (res.code === 200) {
            this.refreshSendUserList()
          } else {
            this.$message.error(res.msg || res.message)
          }
        })
        .catch(err => {
          this.spinning = false
        })
    },

    handleSendUserChange(pagination) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.getSendUserList()
    },

    refreshSendUserList() {
      this.pagination.current = 1
      this.getSendUserList()
    },

    //发券对象列表
    getSendUserList() {
      const data = {
        current: this.pagination.current,
        logInUserId: this.userInfo().id,
        id: this.id == 'null' ? null : this.id,
        size: 5
      }
      uploadList(data).then(res => {
        if (res.code === 200) {
          const { total, records } = res.data
          this.sendUserList = records
          const pagination = { ...this.pagination }
          pagination.total = total
          this.pagination = pagination
          this.total = total
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    //下载导入模板
    handleExportSendUser() {
      window.location.href = sendUserExpert
    }
  }
}
</script>
<style lang="less" scoped></style>
